<template>
  <div class="svg-icon" :style="{ width: size, height: size }">
    <div v-html="svgContent" class="svg-content"></div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  name: {
    type: String,
    required: true
  },
  size: {
    type: String,
    default: '24px'
  },
  color: {
    type: String,
    default: 'currentColor'
  }
})

// SVG 图标库
const svgIcons = {
  equipment: `<svg t="1750156891481" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6855" width="200" height="200"><path d="M923.648 569.344H705.536c5.12-17.408 7.168-35.84 7.168-54.272 0-111.616-91.136-202.752-202.752-202.752-59.392 0-112.64 25.6-150.528 66.56H151.552c55.296-147.456 196.608-246.784 358.4-246.784s303.104 99.328 358.4 246.784H798.72c-22.528 0-40.96 18.432-40.96 40.96s18.432 40.96 40.96 40.96h124.928c12.288 0 24.576-6.144 31.744-15.36 8.192-10.24 10.24-22.528 8.192-34.816-49.152-211.968-235.52-360.448-453.632-360.448C291.84 49.152 105.472 197.632 56.32 409.6c-3.072 12.288 0 24.576 8.192 34.816s19.456 15.36 31.744 15.36h218.112c-5.12 17.408-7.168 35.84-7.168 54.272C307.2 625.664 398.336 716.8 509.952 716.8c59.392 0 112.64-25.6 150.528-66.56h208.896c-55.296 147.456-196.608 246.784-358.4 246.784s-303.104-99.328-358.4-246.784h73.728c22.528 0 40.96-18.432 40.96-40.96s-18.432-40.96-40.96-40.96H96.256c-12.288 0-24.576 6.144-31.744 15.36-8.192 10.24-10.24 22.528-8.192 34.816 49.152 211.968 235.52 360.448 453.632 360.448 218.112 0 404.48-148.48 453.632-360.448 3.072-12.288 0-24.576-8.192-34.816a41.984 41.984 0 0 0-31.744-14.336z m-413.696 66.56c-66.56 0-120.832-54.272-120.832-120.832 0-66.56 54.272-120.832 120.832-120.832 66.56 0 120.832 54.272 120.832 120.832 0 66.56-54.272 120.832-120.832 120.832z" fill="#ffffff" p-id="6856"></path><path d="M509.952 514.048m-68.608 0a68.608 68.608 0 1 0 137.216 0 68.608 68.608 0 1 0-137.216 0Z" fill="#ffffff" p-id="6857"></path></svg>`,
  
  privilege: `<svg t="1750156804868" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3879" width="200" height="200"><path d="M887.466667 183.466667l-183.466667 102.4c-12.8 4.266667-25.6 0-29.866667-12.8l-81.066666-204.8c-29.866667-72.533333-128-72.533333-157.866667 0l-85.333333 209.066666c-4.266667 12.8-17.066667 17.066667-29.866667 8.533334L136.533333 183.466667C68.266667 149.333333-8.533333 209.066667 12.8 281.6l140.8 507.733333c8.533333 38.4 42.666667 64 81.066667 64h554.666666c38.4 0 72.533333-25.6 81.066667-64l140.8-507.733333c21.333333-72.533333-55.466667-132.266667-123.733333-98.133333zM789.333333 768h-554.666666L93.866667 260.266667l183.466666 102.4c55.466667 29.866667 128 4.266667 149.333334-55.466667l85.333333-204.8 81.066667 204.8c25.6 59.733333 93.866667 85.333333 149.333333 55.466667l183.466667-102.4L789.333333 768zM170.666667 981.333333c0-25.6 17.066667-42.666667 42.666666-42.666666h597.333334c25.6 0 42.666667 17.066667 42.666666 42.666666s-17.066667 42.666667-42.666666 42.666667H213.333333c-25.6 0-42.666667-17.066667-42.666666-42.666667z" fill="#ffffff" p-id="3880"></path></svg>`,
  
  gift: `<svg t="1750156953152" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8993" width="200" height="200"><path d="M1023.5904 256.16384h-223.60064c28.18048-35.6352 44.89216-79.70816 44.89216-121.6512 0-37.96992-12.98432-70.61504-37.60128-94.6176C788.72576 21.87264 754.15552 0.4096 694.6816 0.4096c-57.67168 0-105.63584 19.41504-142.66368 57.79456a228.59776 228.59776 0 0 0-40.1408 58.5728 228.67968 228.67968 0 0 0-40.05888-58.5728C434.83136 19.82464 386.82624 0.4096 329.19552 0.4096 269.7216 0.4096 235.15136 21.87264 216.6784 39.89504c-24.576 24.00256-37.64224 56.64768-37.64224 94.6176 0 41.94304 16.75264 86.016 44.93312 121.6512H0.4096V512h73.07264v511.5904h877.03552V512h73.07264V256.16384z m-621.24032 182.6816V329.3184h219.29984v109.60896H402.35008z m202.30144-329.89184c23.06048-23.92064 52.51072-35.51232 90.07104-35.51232 27.60704 0 48.9472 6.51264 61.60384 18.8416 12.77952 12.45184 15.48288 29.85984 15.48288 42.22976 0 56.23808-49.60256 121.6512-113.62304 121.6512h-108.3392c3.97312-43.90912 17.6128-108.62592 54.80448-147.21024z m-352.58368 25.55904c0-12.36992 2.74432-29.77792 15.5648-42.27072 12.61568-12.288 33.91488-18.80064 61.56288-18.80064 37.4784 0 66.88768 11.59168 89.9072 35.34848 39.3216 40.67328 51.24096 106.82368 54.80448 147.37408H365.7728c-64.06144 0-113.70496-65.41312-113.70496-121.6512z m-178.5856 194.7648h255.7952v109.60896H73.48224V329.27744z m73.07264 621.19936V512h255.7952v438.4768H146.55488z m328.9088 0V512h73.07264v438.4768h-73.07264z m401.98144 0h-255.7952V512h255.7952v438.4768z m73.07264-511.5904h-255.7952V329.27744h255.7952v109.60896z" fill="#FFFFFF" p-id="8994"></path></svg>`,
  
  fashion: `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
    <path fill="currentColor" d="M288 320v352a32 32 0 0 0 32 32h384a32 32 0 0 0 32-32V320H288zm-32-64h512a32 32 0 0 1 32 32v384a96 96 0 0 1-96 96H320a96 96 0 0 1-96-96V288a32 32 0 0 1 32-32z"/>
    <path fill="currentColor" d="M416 256a64 64 0 1 0 0-128 64 64 0 0 0 0 128zm192 0a64 64 0 1 0 0-128 64 64 0 0 0 0 128z"/>
  </svg>`,
  
  star: `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
    <path fill="currentColor" d="M512 64l158.4 316.8L992 435.2 752 672l56.32 326.4L512 832 215.68 998.4 272 672 32 435.2l321.6-54.4L512 64z"/>
  </svg>`,
  
  shield: `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
    <path fill="currentColor" d="M512 128L256 256v256c0 174.08 142.08 316.16 316.16 316.16S888.32 686.08 888.32 512V256L512 128zm0 64l192 96v224c0 141.44-114.56 256-256 256S192 653.44 192 512V288l320-96z"/>
  </svg>`,

  user: `<svg t="1750157870445" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10386" width="200" height="200"><path d="M512 512c54.656-1.344 100.032-20.032 136-56S702.656 374.72 704 320c-1.344-54.656-20.032-100.032-56-136S566.72 129.344 512 128c-54.656 1.344-100.032 20.032-136 56S321.344 265.28 320 320c1.344 54.656 20.032 100.032 56 136S457.28 510.656 512 512z m0 64c-72.64-1.984-132.992-27.008-180.992-75.008S258.048 392.64 256 320c1.984-72.64 27.008-132.992 75.008-180.992S439.36 66.048 512 64c72.64 1.984 132.992 27.008 180.992 75.008S765.952 247.36 768 320c-1.984 72.64-27.008 132.992-75.008 180.992S584.64 573.952 512 576z m320 320v-96c-0.64-27.328-9.984-49.984-28.032-68.032-17.92-17.92-40.64-27.328-67.968-27.968h-448c-27.328 0.64-49.984 9.984-68.032 28.032-17.92 17.92-27.328 40.64-27.968 67.968V896a31.168 31.168 0 0 1-8.96 23.04 31.168 31.168 0 0 1-23.04 8.96 31.168 31.168 0 0 1-23.04-8.96A31.168 31.168 0 0 1 128 896v-96c1.344-45.312 17.024-83.008 47.04-112.96 29.952-30.08 67.648-45.696 112.96-47.04h448c45.312 1.344 83.008 17.024 112.96 47.04 30.08 29.952 45.696 67.648 47.04 112.96V896a31.168 31.168 0 0 1-8.96 23.04 31.168 31.168 0 0 1-23.04 8.96 31.168 31.168 0 0 1-23.04-8.96A31.168 31.168 0 0 1 832 896z" fill="#ffffff" fill-opacity=".96" p-id="10387"></path></svg>`
}

const svgContent = computed(() => {
  const svg = svgIcons[props.name]
  if (!svg) {
    console.warn(`SVG icon "${props.name}" not found`)
    return ''
  }
  // 移除固定的width和height属性，替换颜色
  return svg
    .replace(/width="\d+"/g, '')
    .replace(/height="\d+"/g, '')
    .replace(/currentColor/g, props.color)
    .replace(/#ffffff/gi, props.color)
    .replace(/#FFFFFF/gi, props.color)
})
</script>

<style scoped>
.svg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.svg-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.svg-content :deep(svg) {
  width: 100%;
  height: 100%;
  display: block;
}
</style>